<template>
  <div class="toDay">
    <!--    个人任务-->
    <div class="board">
      <div class="title">
        个人任务 <i class="icon ic_more" v-show="false"></i>
      </div>
      <div class="content">
        <div class="progress">
          <el-progress :color="'#0A52E4'" :width="91" :stroke-width="8" type="circle"
                       :percentage="personalTask.proportion"></el-progress>
        </div>
        <div class="info">
          <h4>剩余任务 {{personalTask.unCompleteAllTaskNum}} <i>今日</i></h4>
          <p>总任务 {{personalTask.allTaskNum}}<span>--</span>已完成 {{(personalTask.allTaskNum-personalTask.unCompleteAllTaskNum)||0}}</p>
          <p>今日完成率{{personalTask.proportion}}%</p>
        </div>
      </div>
    </div>
    <!--    公司任务-->
    <div class="board">
      <div class="title">
        公司任务 <i class="icon ic_more" v-show="false"></i>
      </div>
      <div class="content">
        <div class="progress">
          <el-progress :color="'#8629EF'" :width="91" :stroke-width="8" type="circle"
                       :percentage="companyTask.proportion"></el-progress>
        </div>
        <div class="info">
          <h4>剩余任务 {{companyTask.unCompleteAllTaskNum}} <i>今日</i></h4>
          <p>总任务 {{companyTask.allTaskNum}}<span>--</span>已完成 {{(companyTask.allTaskNum-companyTask.unCompleteAllTaskNum)||0}}</p>
          <p>今日完成率{{
            companyTask.proportion
            }}%</p>
        </div>
      </div>
    </div>
    <!--    个人审批-->
    <div class="board">
      <div class="title">
        个人延期审批
      </div>
      <div class="content">
        <p class="sub-title">
          <span class="left">待处理 {{personalApproval.unCompleteNum}}</span>
          <span class="right">总申请数 {{personalApproval.total}}</span>
        </p>
        <div class="progress-line">
          <el-progress :text-inside="true" :stroke-width="6" :percentage="((personalApproval.total-personalApproval.unCompleteNum)/personalApproval.total)*100||0" :color="'#0A52E4'"></el-progress>
        </div>
        <div class="btn" @click="toApproval">去处理</div>
      </div>
    </div>
    <loading v-if="is_show_loading"></loading>
  </div>
</template>

<script>
  import loading from '@/components/loading'
  export default {
    name: "Today",
    components:{
      loading,
    },
    data() {
      return {
        is_show_loading:true,
        personalTask:{},//个人任务
        companyTask:{},//公司任务
        personalApproval:{},//个人延期审批
      }
    },
    created() {
      this.getPersonalTask();
      this.getCompanyTask();
      this.getPersonalApproval();
    },
    methods: {
      //获取个人任务
      getPersonalTask() {
        this.$http.get('task/task/count/user', {params: {userId: this.$store.state.userInfo.userId}
      }).then(res=>{
        if(res.statusCode==200){
          this.personalTask=res.data;
          let _this=this;
          setTimeout(() => {
            this.is_show_loading=false;
          },1000)

        }else {
          this.$message.error(res.statusMsg);
        }
        });
      },
      //获取公司任务
      getCompanyTask() {
        this.$http.get('task/task/count/company', {params: {companyId: this.$store.state.userInfo.companyId}
        }).then(res=>{
          if(res.statusCode==200){
            this.companyTask=res.data;
          }else {
            this.$message.error(res.statusMsg);
          }
        });
      },
      //获取个人延期审批
      getPersonalApproval(){
        this.$http.get('task/task/count/userDelay',{params:{userId: this.$store.state.userInfo.userId}}).then(res=>{
          if(res.statusCode==200){
            this.personalApproval=res.data;
          }else {
            this.$message.error(res.statusMsg);
          }
        });
      },
      //去延期审批页面
      toApproval(){
        this.$router.push({path: '/task/delayApplyList'});
      }
    },
  }
</script>

<style scoped type="text/scss" lang="scss">
  .toDay {
    display: flex;
    flex-wrap: wrap;

    .board {
      width: 400px;
      height: 270px;
      background-color: #ffffff;
      border-radius: 6px;
      margin-right: 16px;
      margin-bottom: 16px;
      box-sizing: border-box;
      padding: 32px;

      .title {
        color: #454A55;
        font-size: 16px;
        font-weight: bold;
        position: relative;
        padding-bottom: 40px;

        i {
          position: absolute;
          top: 0;
          right: 0;
          cursor: pointer;
        }
      }

      .content {
        display: flex;
        width: 100%;
        flex-wrap: wrap;

        .progress {
          width: 112px;
          height: 112px;
          /*background-color: #F2F6F9;*/
          border-radius: 50%;
          text-align: center;
          padding-top: 11px;
          background-image: linear-gradient(#f3f6f9, #ffffff);
        }

        .info {
          padding-left: 40px;

          > h4 {
            padding-top: 13px;
            padding-bottom: 29px;
            color: #454A55;
            font-size: 16px;
            font-weight: bold;
            position: relative;

            > i {
              position: absolute;
              width: 32px;
              height: 18px;
              line-height: 18px;
              border-radius: 2px;
              color: #0A52E4;
              font-size: 12px;
              background-color: #F4F5F9;
              right: 5px;
              top: 12px;
              text-align: center;
            }
          }

          > p {
            color: #96A2AA;
            font-size: 14px;
            padding-bottom: 15px;

            > span {
              width: 24px;
              display: inline-block;
              visibility: hidden;
            }
          }
        }

        .sub-title {
          padding-top: 7px;
          font-size: 16px;
          width: 100%;
          padding-bottom: 20px;

          > .left {
            font-weight: bold;
            color: #454A55;
            float: left;
          }

          > .right {
            color: #96A2AA;
            float: right;
          }
        }

        .progress-line {
          width: 100%;
        }

        .btn {
          background-color: #0A52E4;
          width: 72px;
          line-height: 38px;
          text-align: center;
          border-radius: 6px;
          margin-top: 32px;
          font-size: 14px;
          color: #ffffff;
          cursor: pointer;
        }
      }
    }
  }
</style>
<style>
  .progress-line .el-progress-bar__innerText {
    display: none;
  }
</style>
